<template>
    <pollute-group 
      v-if="type === 'group'"
      :checkedKeys="checkedKeys"
      :width="width"
      :accordion="accordion"
      :dataGrid="dataGrid"
      :show-checkbox="showCheckbox"
      @change="changePolluteGroup">
    </pollute-group > 
    <pollute-panel 
      v-else
      :width="width"
      @change="changePollutePanel"
      :show-checkbox="showCheckbox"
      :filterable="filterable"
      :dataGrid="dataGrid"
      :checkedKeys="checkedKeys">
    </pollute-panel>
</template>
<script>
import polluteGroup from './group';
import PollutePanel from './panel';
export default {
  name: 'PolluteSelect',
  props: {
    // 控件类型，group 因子分组,panel 因子面板
    type: {
      type: String,
      default: 'group'
    },
    width: {
      type: Number,
      default: 200
    },
    accordion: { // 是否每次只展开一层
      type: Boolean,
      default: false
    },
    defaultCheckedNum: {
      type: Number | String,
      default: 8
    },
    showCheckbox: {
      type: Boolean,
      default: true
    },
    pointCode: String,
    checkedKeys: {
      type: Array,
      default: () => []
    },
    filterable: {
      type: Boolean,
      default: false
    }
  },
  components: {
    polluteGroup,
    PollutePanel
  },
  data() {
    return {
      dataGrid: [],
      dataList: []
    };
  },
  watch: {
    dataList() {
      this.dataGrid = this.dataList.map(item => {
        return {
          label: item.groupname,
          id: item.groupid + '',
          childshow: false,
          checked: false,
          children: item.polluteList.map(v => {
            return {
              data: v,
              checked: false,
              parentID: item.groupid + '',
              label: v.pollutename,
              id: v.polluteid,
              // pollconCunit: v.pollconCunit,
              // pollconCunitVol: v.pollconCunitVol,
              children: []
            };
          })
        };
      });
      this.$emit('data-load', this.dataGrid);
    }
    // typeAndDataList(n) {
    //   if (this.type === 'group') {
    //     this.dataGrid = this.dataList.map(item => {
    //       return {
    //         label: item.groupname,
    //         id: item.groupid + '',
    //         childshow: false,
    //         checked: false,
    //         children: item.polluteList.map(v => {
    //           return {
    //             data: v,
    //             checked: false,
    //             parentID: item.groupid + '',
    //             label: v.pollutename,
    //             id: v.pollutecode,
    //             // pollconCunit: v.pollconCunit,
    //             // pollconCunitVol: v.pollconCunitVol,
    //             children: []
    //           };
    //         })
    //       };
    //     });
    //   } else {
    //     this.dataGrid = this.dataList.reduce((item, next) => {
    //       item.push(...next.polluteList);
    //       return item;
    //     }, []);
    //   }
    //   this.$emit('data-load', this.dataGrid);
    // }
  },
  computed: {
    layoutSkin: {
      get() { return this.$store.state.common.layoutSkin; }
    },
    typeAndDataList() {
      const { type, dataList } = this;
      return {
        type, dataList
      };
    }
  },
  methods: {
    changePolluteGroup(val) {
      this.$emit('change', val);
    },
    changePollutePanel(val) {
      this.$emit('change', val);
    },
    getGroupData(httpDataOption = {}) {
      const option = Object.assign({
        url: '/service-monitor/pullutetree/list',
        type: 'post',
        params: {
          pointidList: [],
          pollutetype: ''
        }
      }, httpDataOption);
      this.$ajax(option).then(resp => {
        const { success, data } = resp;
        if (success) {
          this.dataList = data.data;
        }
      });
    },
    getPanelData(httpDataOption = {}) {
      const option = Object.assign({
        url: '/service-monitor/pullutelist/search',
        type: 'post',
        params: {
          pointid: 1,
          pollutetype: ''
        }
      }, httpDataOption);
      this.$ajax(option).then(resp => {
        const { success, data } = resp;
        if (success) {
          this.dataList = data.data;
        }
      });
    }
  },
  created() {

  }

};
</script>

<style>

</style>